<template>
	<view class="con">
		<view class="connr" v-for="item in list" @click="to(item.id,item.path)">
			<view :class="id==item.id?'img1':'img2'">
				<image v-if="id==item.id" :src="item.img2" mode=""></image>
				<image v-else :src="item.img1" mode=""></image>
			</view>
			<view class="title">
				{{item.title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tabbar",
		props: {
			isid: 0
		},
		mounted() {
			this.id = this.isid
			if (uni.getStorageSync('login_type') == 2) {
				this.list = [{
						id: 1,
						title: '首页',
						path: '',
						img1: '/static/tabar/1.png',
						img2: '/static/tabar/11.png',

					},
					{
						id: 2,
						title: '我的转发',
						path: '',
						img1: '/static/tabar/3.png',
						img2: '/static/tabar/33.png',

					},
					{
						id: 3,
						title: '我的',
						path: '',
						img1: '/static/tabar/4.png',
						img2: '/static/tabar/44.png',

					}
				]
			} else {
				this.list = [{
						id: 1,
						title: '首页',
						path: '',
						img1: '/static/tabar/1.png',
						img2: '/static/tabar/11.png',

					}, {
						id: 2,
						title: '我的转发',
						path: '',
						img1: '/static/tabar/3.png',
						img2: '/static/tabar/33.png',

					},
					{
						id: 4,
						title: '我的发布',
						path: '',
						img1: '/static/tabar/2.png',
						img2: '/static/tabar/22.png',

					},
					{
						id: 3,
						title: '我的',
						path: '',
						img1: '/static/tabar/4.png',
						img2: '/static/tabar/44.png',

					}
				]
			}
		},
		data() {
			return {
				id: 0,
				list: []
			};
		},

		methods: {
			to(id, url) {
				uni.switchTab({
					url: url,
				});
			}
		}
	}
</script>

<style lang="less">
	.con {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 580rpx;
		height: 120rpx;
		background: #ffffff;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		box-shadow: 0rpx -4rpx 16rpx 4rpx rgba(122, 122, 122, 0.06);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 85rpx 29rpx;
		z-index: 999;

		.connr {

			margin-top: -30rpx;
			text-align: center;

			.img1 {
				width: 82rpx;
				height: 82rpx;
				background: #00d1b1;
				border: 8rpx solid #ffffff;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 38rpx;
					height: 38rpx;
				}
			}

			.img2 {
				width: 82rpx;
				height: 82rpx;
				background-color: rgba(122, 122, 122, 0);
				border: 8rpx solid rgba(122, 122, 122, 0);
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 38rpx;
					height: 38rpx;
				}
			}

			.title {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: center;
				color: #afb8cc;
			}
		}

	}
</style>